<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />

  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body ontouchstart>
    <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:goBack();" class="ui_back"></a>气泡弹出框</header>
        <div class="ui_page_bd">
            <p class="ui_con_block">弹出式的气泡框。让有限的空间看见更多的信息。
              <br>注意：
              <br>① 使用纯css伪类:hover实现，需要遵循约定布局：触发按钮和popover为相邻元素，触发按钮依赖属性data-role="popover-btn"，popover依赖属性data-role="popover"
              <br>② 需要在body绑定ontouchstart才能激活ios的:hover
            </p>
            <!-- /// [htmldemo] -->
            <ul class="p30">
                <li class="mb20">
                  <button type="button" class="ui_btn ui_default_btn ui_inline" skin="plain" data-role="popover-btn">默认浅色风格</button>
                  <!-- popover -->
                  <div class="ui_popover" data-role="popover">
                    <i class="ui_popover_arrow"></i>
                    <ul class="ui_popover_menu">
                      <li class="ui_popover_menu_item">选项一</li>
                      <li class="ui_popover_menu_item">选项二</li>
                      <li class="ui_popover_menu_item">选项三</li>
                    </ul>
                  </div>
                </li>
                <li class="mb20">
                  <button type="button" class="ui_btn ui_inline" data-role="popover-btn">设置深色风格</button>
                  <!-- popover -->
                  <div class="ui_popover ui_popover_dark" data-role="popover">
                    <i class="ui_popover_arrow"></i>
                    <ul class="ui_popover_menu">
                      <li class="ui_popover_menu_item">选项一</li>
                      <li class="ui_popover_menu_item">选项二</li>
                      <li class="ui_popover_menu_item">选项三</li>
                    </ul>
                  </div>
                </li>
                <li class="mb20">
                  <span class="mr5">自定义内容</span><i class="primary_color f20" data-role="popover-btn">ⓘ</i>
                  <!-- popover -->
                  <div class="ui_popover" data-role="popover">
                    <i class="ui_popover_arrow" style="left:90px"></i>
                    <div class="ui_popover_content">
                      这里有国内外知名的画廊、设计工作室、艺术展示空间、时尚店铺、特色餐厅及咖啡厅，这里有休闲文艺的小清新。一个人的时候，你会爱上这里。
                    </div>
                  </div>
                </li>
            </ul>
            <!-- /// [htmldemo] -->
        </div>
    </div>
</body>
</html>